<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link href="style/css/index.css" rel='stylesheet' />
    <link href="style/css/reset.css" rel='stylesheet' />
    <style>
        .d0_outer {
            height: 1020px;
        }

        .d0_bottom_left,
        .d0_bottom_mid,
        .d0_bottom_right {
            float: left;
            height: 315px;
            margin-left: 10px;
            margin-top: 10px;
            background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.16) 100%);
        }

        .d0_bottom_left,
        .d0_bottom_right {
            width: calc(33.8% + 10px);
        }

        .d0_bottom_mid {
            width: 29.4%;
        }

        #d0_gzd,
        #d0_cz {
            height: 270px;
            width: 650px;
            margin: 0 auto;
        }





        #mooc {
            width: 550px;
            margin: 20px auto 0;
            text-align: left;
            /* 让新闻内容靠左 */
        }

        #moocTitle a {
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: inline;
            color: #fff;
            font-size: 12px;

            line-height: 24px;
        }

        #moocBox {
            height: 240px;
            /*修改高度可以更改显示条数*/
            margin-top: 10px;
            padding: 0 10px;
            overflow: hidden;
            /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */

        }

        #moocBox {
            transition: all 2s;
        }

        #mooc ul li {
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            padding: 0 20px;

        }

        #mooc ul li:nth-child(2n) {
            background-color: rgba(204, 204, 204, 0.87);
        }

        #mooc ul li a {
            width: 220px;
            font-size: 16px;
            float: left;
            display: block;
            color: #fff;
            height: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
        }

        .d0_zt {
            color: #1af0e5;
        }

        #mooc ul li span {
            float: right;
            color: #fff;
        }
    </style>
</head>

<body class="d0_body">
    <div class="d0_outer">
        <div class="d0_small">
            <div class="d0_header_title">气象监测</div>
            <div class="d0_weather">
                <span class="d0_moon">
                    <img src="style/img/moon@2x.png">
                </span>
                <span class="d0_time_top">
                    <i class="d0_time">13:00</i><br />
                    <i class="d0_wr">无污染</i>
                </span>
                <span class="d0_temper d0_time_top">29°</span>
                <span class="d0_time_top">
                    <i class="d0_changbig">
                        <img src="style/img/minimize-2@2x.png">
                    </i>
                </span>
            </div>
            <div class="d0_header_title">视频监测</div>
            <div class="d0_videolists">
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                        <p class="d0_address">五常市长宝乡中华村</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start">
                            <img src="style/img/Group@2x.png">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                        <p class="d0_address">五常市长宝乡中华村</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start">
                            <img src="style/img/Group@2x.png">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                        <p class="d0_address">五常市长宝乡中华村</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start">
                            <img src="style/img/Group@2x.png">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                        <p class="d0_address">五常市长宝乡中华村</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start">
                            <img src="style/img/Group@2x.png">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                        <p class="d0_address">五常市长宝乡中华村</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start">
                            <img src="style/img/Group@2x.png">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                        <p class="d0_address">五常市长宝乡中华村</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start">
                            <img src="style/img/Group@2x.png">
                        </span>
                    </div>
                </div>
            </div>
            <div class="d0_videolists_page">
                <div style="float: right">
                    <span class="d0_blue">«</span><span>‹</span><span>›</span><span class="d0_blue">»</span>
                </div>
            </div>
        </div>
        <div class="d0_middle">
            <div class="d0_header_title">空气湿度</div>
            <div id="d0_kqsd"></div>
            <div class="d0_header_title">空气温度</div>
            <div id="d0_kqwd"></div>
        </div>
        <div class="d0_big">
            <div class="d0_map">
                <div class="d0_name">巨鑫伟业数字农业</div>
                <div class="d0_jdjrnum">
                    <div id="d0_jrsl">

                    </div>
                    <div class="d0_jrsl_text">
                        <p>20</p>
                        <p class="d0_jisl_bule"><i class="d0_point"></i>基地接入数量</p>
                        <p>39</p>
                        <p class="d0_jisl_bule"><i class="d0_point d0_blue2"></i>摄像头接入数量</p>
                        <p>635</p>
                        <p class="d0_jisl_bule"><i class="d0_point d0_blue3"></i>传感器接入数量</p>
                    </div>
                </div>
            </div>
            <div class="d0_header_title">育苗统计</div>
            <div class="d0_pings">
                <div class="d0_pings_rows">
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens1" class="d0_greens"></div>
                            <div class="d0_green_text">西红柿</div>
                        </div>
                    </div>
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens2" class="d0_greens"></div>
                            <div class="d0_green_text">西葫芦</div>
                        </div>
                    </div>
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens3" class="d0_greens"></div>
                            <div class="d0_green_text">辣椒</div>
                        </div>
                    </div>
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens4" class="d0_greens"></div>
                            <div class="d0_green_text">樱桃</div>
                        </div>
                    </div>
                </div>
                <div class="d0_pings_rows">
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens5" class="d0_greens"></div>
                            <div class="d0_green_text">茄子</div>
                        </div>
                    </div>
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens6" class="d0_greens"></div>
                            <div class="d0_green_text">黄瓜</div>
                        </div>
                    </div>
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens7" class="d0_greens"></div>
                            <div class="d0_green_text">葡萄</div>
                        </div>
                    </div>
                    <div class="d0_ping">
                        <div class="d0_center">
                            <div id="d0_greens8" class="d0_greens"></div>
                            <div class="d0_green_text">西瓜</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d0_middle">
            <div class="d0_header_title">土壤湿度</div>
            <div id="d0_trsd"></div>
            <div class="d0_header_title">土壤温度</div>
            <div id="d0_trwd"></div>
        </div>
        <div class="d0_small">
            <div class="d0_header_title">大棚使用情况</div>
            <div class="d0_videolists d0_dpname">
                <div class="d0_videolist ">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start d0_pie" id="d0_pie1">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start d0_pie" id="d0_pie2">
                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start d0_pie" id="d0_pie3">

                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start d0_pie" id="d0_pie4">

                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start d0_pie" id="d0_pie5">

                        </span>
                    </div>
                </div>
                <div class="d0_videolist">
                    <div class="d0_video_left">
                        <p>铁力市九河泉鸭稻共栖有机水稻示范基地</p>
                    </div>
                    <div class="d0_video_right">
                        <span class="d0_video_start d0_pie" id="d0_pie6">

                        </span>
                    </div>
                </div>
            </div>
            <div class="d0_header_title">CO2统计</div>
            <div id="d0_co"></div>
        </div>
        <div style="clear: both"></div>
        <div class="d0_bottom_left">
            <div class="d0_header_title">光照度</div>
            <div id="d0_gzd"></div>
        </div>
        <div class="d0_bottom_mid">
            <div class="d0_header_title">大棚信息</div>
            <!--  慕课网课程公告开始 -->
            <div id="mooc">
                <div id="moocBox">
                    <ul>
                        <li><a href="#">大棚名称1</a><i class="d0_zt">状态</i><span>2018-09-18 11：00</span></li>
                        <li><a href="#">大棚名称2</a><i class="d0_zt">状态</i><span>2018-10-09 11：00</span></li>
                        <li><a href="#">大棚名称3</a><i class="d0_zt">状态</i><span>2018-10-21 11：00</span></li>
                        <li><a href="#">大棚名称4</a><i class="d0_zt">状态</i><span>2018-11-01 11：00</span></li>
                        <li><a href="#">大棚名称5</a><i class="d0_zt">状态</i><span>2018-11-06 11：00</span></li>
                        <li><a href="#">大棚名称6</a><i class="d0_zt">状态</i><span>2018-11-08 11：00</span></li>
                        <li><a href="#">大棚名称7</a><i class="d0_zt">状态</i><span>2018-11-15 11：00</span></li>
                        <li><a href="#">大棚名称8</a><i class="d0_zt">状态</i><span>2018-11-22 11：00</span></li>
                        <li><a href="#">大棚名称9</a><i class="d0_zt">状态</i><span>2018-12-06 11：00</span></li>
                        <li><a href="#">大棚名称10</a><i class="d0_zt">状态</i><span>2018-12-06 11：00</span></li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="d0_bottom_right">
            <div class="d0_header_title">产量</div>
            <div id="d0_cz"></div>
        </div>
    </div>
</body>
<script src="common/echarts/echarts.common.min.js"></script>
<script>
    /*空气湿度echarts*/
    var myChart1 = echarts.init(document.getElementById('d0_kqsd'));
    //数据
    var datas = [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7];
    option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '10%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            interval: 10,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}°',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '湿度',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#40D0A3'
                    }, {
                        offset: 0.86,
                        color: 'rgba(47,166,179,0.00)'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#40D0A3'
                },
            },
            data: datas,
        }]
    };
    myChart1.setOption(option1);
    /*空气温度echarts*/
    var myChart2 = echarts.init(document.getElementById('d0_kqwd'));
    //数据
    var datas2 = [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7];
    option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '10%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            interval: 10,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}°',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '温度',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: ' #FAD961'
                    }, {
                        offset: 0.9,
                        color: 'rgba(247,107,28,0.00)'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#FAD961'
                },
            },
            data: datas2,
        }]
    };
    myChart2.setOption(option2);
    /*土壤湿度echarts*/
    var myChart3 = echarts.init(document.getElementById('d0_trsd'));
    //数据
    var datas3 = [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7];
    option3 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '10%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            interval: 10,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}°',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '温度',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#B4EC51'
                    }, {
                        offset: 0.9,
                        color: 'rgba(66,147,33,0.00)'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#B4EC51'
                },
            },
            data: datas3,
        }]
    };
    myChart3.setOption(option3);
    /*土壤温度echarts*/
    var myChart4 = echarts.init(document.getElementById('d0_trwd'));
    //数据
    var datas4 = [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7];
    option4 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '10%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            interval: 10,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}°',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '温度',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00DBDE'
                    }, {
                        offset: 0.9,
                        color: 'rgba(0,22,255,0.00)'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#00DBDE'
                },
            },
            data: datas4,
        }]
    };
    myChart4.setOption(option4);
    /*co2统计echarts*/
    var myChart5 = echarts.init(document.getElementById('d0_co'));
    //数据
    var datas5 = [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7];
    option5 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '10%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            interval: 10,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}°',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '温度',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#C86DD7'
                    }, {
                        offset: 0.9,
                        color: ' rgba(48,35,174,0.00)'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#C86DD7'
                },
            },
            data: datas5,
        }]
    };
    myChart5.setOption(option5);

    //蔬菜饼1
    var myChart6 = echarts.init(document.getElementById('d0_greens1'));
    option6 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#FFD12F' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FFA415' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart6.setOption(option6);
    //蔬菜饼2
    var myChart7 = echarts.init(document.getElementById('d0_greens2'));
    option7 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#3023AE' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#C86DD7' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart7.setOption(option7);
    //蔬菜饼3
    var myChart8 = echarts.init(document.getElementById('d0_greens3'));
    option8 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#3023AE' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#B4EC51' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart8.setOption(option8);
    //蔬菜饼4
    var myChart9 = echarts.init(document.getElementById('d0_greens4'));
    option9 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#FF5272' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FE7E8B' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart9.setOption(option9);
    //蔬菜饼5
    var myChart10 = echarts.init(document.getElementById('d0_greens5'));
    option10 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart10.setOption(option10);
    //蔬菜饼6
    var myChart11 = echarts.init(document.getElementById('d0_greens6'));
    option11 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#4CBFDC' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#4499D4' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart11.setOption(option11);
    //蔬菜饼7
    var myChart12 = echarts.init(document.getElementById('d0_greens7'));
    option12 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#B4EC51' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#429321' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart12.setOption(option12);
    //蔬菜饼8
    var myChart13 = echarts.init(document.getElementById('d0_greens8'));
    option13 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#7CCFED' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#46A1D6' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart13.setOption(option13);



    //大棚饼1
    var myChart14 = echarts.init(document.getElementById('d0_pie1'));
    option14 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart14.setOption(option14);
    //大棚饼2
    var myChart15 = echarts.init(document.getElementById('d0_pie2'));
    option15 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart15.setOption(option15);
    //大棚饼3
    var myChart16 = echarts.init(document.getElementById('d0_pie3'));
    option16 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart16.setOption(option16);
    //大棚饼4
    var myChart17 = echarts.init(document.getElementById('d0_pie4'));
    option17 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart17.setOption(option17);
    //大棚饼5
    var myChart18 = echarts.init(document.getElementById('d0_pie5'));
    option18 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart18.setOption(option18);
    //大棚饼6
    var myChart19 = echarts.init(document.getElementById('d0_pie6'));
    option19 = {
        title: {
            text: '80.00%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '10'
            }
        },
        color: ['#0C225E'],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 80,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#40D0A3' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2FA6B3' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '02',
                value: 20
            }]
        }]
    };
    myChart19.setOption(option19);


    //基地接入
    var myChart20 = echarts.init(document.getElementById('d0_jrsl'));
    option20 = {
        title: {
            text: '黑河市',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '12'
            }
        },
        color: ['#44D8DB', '#146AE8 ', '#33AEFE '],
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '100%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: 20,
                name: '01',
            }, {
                name: '02',
                value: 39
            }, {
                name: '03',
                value: 635
            }]
        }]
    };
    myChart20.setOption(option20);


    //光照度
    var myChart21 = echarts.init(document.getElementById('d0_gzd'));
    //数据
    var datas21 = [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7];
    option21 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '8%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            },
        }],
        yAxis: [{
            type: 'value',
            interval: 10,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}lux',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '光照度',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#B4EC51'
                    }, {
                        offset: 0.5,
                        color: ' #429321'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#B4EC51'
                },
            },
            data: datas21,
        }]
    };
    myChart21.setOption(option21);

    //产值
    var myChart22 = echarts.init(document.getElementById('d0_cz'));
    //数据
    var datas22 = [120, 200, 150, 80, 70, 110, 130, 123, 435, 120, 200, 150];
    option22 = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '8%',
            right: '3%',
            bottom: '13%',
            top: '10%'
        },
        xAxis: [{
            type: 'category',

            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                interval: 0,
                textStyle: {
                    fontSize: 10,
                    color: '#7085A4'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                formatter: '{value}万',
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            }, splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '产量',
            type: 'bar',
            barWidth: '50%',
            data: datas22,
        }]
    };
    myChart22.setOption(option22);





    //新闻滚动
    var area = document.getElementById('moocBox');
    var iliHeight = 30;//单行滚动的高度
    var speed = 50;//滚动的速度
    var time;
    var num = 8;      //设置几条数据开始滚动
    var delay = 2000;
    area.scrollTop = 0;
    if (area.getElementsByTagName('li').length > num) {
        area.innerHTML += area.innerHTML;//克隆的内容
    }

    function startScroll() {
        time = setInterval("scrollUp()", speed);
        area.scrollTop++;
    }
    function scrollUp() {
        if (area.scrollTop % iliHeight == 0) {
            clearInterval(time);
            setTimeout(startScroll, delay);
        } else {
            area.scrollTop++;
            if (area.scrollTop >= area.scrollHeight / 2) {
                area.scrollTop = 0;
            }
        }
    }
    if (area.getElementsByTagName('li').length > num) {
        setTimeout(startScroll, delay)

    }

</script>

</html>